.neo-checkboxfield {
    .neo-checkbox-icon {
        color      : var(--checkboxfield-color);
        cursor     : pointer;
        display    : inline-block;
        font-family: var(--checkboxfield-icon-font-family);
        font-size  : var(--checkboxfield-icon-font-size);
        font-style: normal !important;
        margin     : var(--checkboxfield-icon-margin);
        width      : 20px;
    }

    .neo-checkbox-input {
        appearance: none;
        margin    : 0;
        width     : 0; // using display: none would break the keynav

        &:checked {
            +.neo-checkbox-icon {
                color: var(--checkboxfield-color-checked);
            }
        }

        &:focus {
            outline : 0;
        }
    }

    .neo-checkbox-label {
        align-items: center;
        color      : var(--textfield-label-color);
        display    : flex;
        user-select: none;
    }

    .neo-checkbox-value-label {
        color      : var(--textfield-label-color);
        user-select: none;
    }

    .neo-error {
        color      : var(--textfield-border-color-invalid);
        font-size  : 11px;
        margin-top : .3em;
        white-space: break-spaces;
        word-break : break-word;

        &.neo-absolute {
            position: absolute;
        }
    }

    .neo-error-wrapper {
        position: relative;
    }

    &.neo-invalid {
        .neo-checkbox-icon {
            color: var(--textfield-border-color-invalid);
        }

        &.neo-use-alert-state {
            .neo-checkbox-icon {
                color: var(--textfield-border-color-alert);
            }
        }
    }

    &.neo-label-top {
        .neo-checkbox-input {
            margin-left: 0;
        }

        .neo-checkbox-label {
            display  : flex;
            flex-flow: row wrap;
            margin   : var(--checkboxfield-label-top-margin);

            .neo-checkbox-label {
                width: 100% !important;
            }
        }

        .neo-checkbox-value-label {
            flex: 1 0 1px;
        }
    }

    &.neo-use-alert-state {
        .neo-error {
            color: var(--textfield-border-color-alert);
        }
    }
}
